<template>
    <div class="app_a1">
        <div class="login_box">
            <!-- 头像区域 -->
            <div class="head_pic">
                <img src='../assets/logo.png' alt="头像">
            </div>
            <!-- 表单区域 -->
            <el-form ref="loginref" label-position="right" :rules="rules" label-width="80px" class="login_form" :model="loginForm">
            <!-- 用户名区域 -->
                <el-form-item label="用户名"  prop='name'>
                    <el-input prefix-icon="el-icon-user" v-model="loginForm.name" placeholder="请输账号"></el-input>
                </el-form-item>
            <!-- 密码 -->
                <el-form-item label="密码">
                    <el-input prefix-icon="el-icon-loading" v-model="loginForm.pwd" type="password"></el-input>
                </el-form-item>
            <!-- 按钮区域 -->
                <el-form-item class="buttons">
                        <el-button type="primary" @click="sub">提交</el-button>
                        <el-button>注册</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            loginForm:{
                name:'405792710',
                pwd:'jiahui.1233',
            },
            rules:{
                name:[
                    {required:true,message:'你填啊',trigger:'blur'},
                    {min:5,max:13,message:'字符长度在5-13之间',trigger:'blur'}
                ]
            },
            save:{
                name:'405792710',
                password:'jiahui.1233'
            },
            getdata:[],
            yanzheng:-1
        }
    },
    methods:{
        sub(){
            this.$refs.loginref.validate((valid)=>{
                var that=this;
                if(valid){
                     this.$http.get('/js/test.json').then((res) => {
                        that.getdata=res.data.user;
                        //遍历这个数组每个对象里面的用户名和密码有没有和用户输入的一样的,如果有
                        //就登录成功,没有就失败
                        for(let i of that.getdata){
                            if(i.username==that.loginForm.name&&i.password==that.loginForm.pwd){
                                that.yanzheng+=1
                            }
                            
                        }
                        if(that.yanzheng!=-1){
                            that.$message({
                                message: '登录成功',
                                type: 'success'
                                });
                            that.yanzheng=-1;
                            window.sessionStorage.setItem('token','wujiahui')
                            that.$router.push('/about')
                        }else{
                            that.$message.error('不对')
                            that.yanzheng=-1;
                        }
                        })
                }else{
                    alert('error')
                }
                
            })
        }
    }
    
    
}
</script>
<style lang="less" scoped>
.app_a1{
    background-color: green;
    height: 100%;
}
.login_box{
    background: white;
    width: 400px;
    height: 250px;
    position: absolute;
    border-radius:3px;
    left: 50%;
    top: 50%; 
    transform: translate(-50%,-50%)

}
.head_pic{
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 1px solid #000;
    overflow: hidden;
    transform: translate(-50%,-50%);
    box-shadow: 0 0 20px #ddd;
    position: absolute;
    background: rgb(182, 153, 153);
    left: 50%;
    img{
        width: 100px;
        height: 100px;
    }
}
.buttons{
    display: inline;
    float: right;
    margin-right:30px; 
}
.login_form{
    margin-top:70px; 
}
</style>

